<template>
	<view class="container">
		<!-- 导航条 -->
		<view class="tabs">
			<nav-tab v-model="activeTab" :tabs="tabItems" field="name" @change="tabChange"></nav-tab>
		</view>
		<!-- 滑动列表 -->
		<swiper class="swipers" :current="activeTab" @change="swiperChange">
			<swiper-item v-for="(tab,index1) in tabItems" :key="index1">
				<scroll-view class="scroll" scroll-y="true" enableBackToTop="true" @scrolltolower="loadMore(index1)">
					<view class="list">
						<navigator class="list-item" hover-class="none" v-for="(item,index2) in tab.listItmes"
							:key="index2" :url="'/pages/sutra/details?id='+item.id">
							<view class="title">{{item.name}}</view>
							<view class="append">
								<view class="keyman">
									<text class="iconfont icon-writer"></text>{{item.author}}
								</view>
								<view>
									<text class="category" v-if="item.alias">{{item.alias}}</text>
									<text class="volumn">{{item.volume}}</text>
								</view>
							</view>
							<view class="tag" v-if="item.copyable">
								<text class="iconfont icon-album"></text>
							</view>
						</navigator>
						<view class="loading-more" v-if="isLoading && tab.listItmes && tab.listItmes.length > 0">
							<text class="loading-more-text">{{loadingText}}</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import apiSutra from '@/common/api/sutra.js'
	import apiSys from '@/common/api/sys.js'
	export default {
		data() {
			return {
				activeTab: 0,
				isLoading: false,
				loadingText: '加载更多',
				tabItems: [{
					id: 0,
					name: '常用',
					pageNum: 1,
					listItmes: [],
				}, ],
			};
		},
		created() {
			this.loadCategories()
			this.loadMore(0)
		},
		methods: {
			tabChange(index) {
				this.activeTab = index
				var tab = this.tabItems[index]
				tab.pageNum = tab.pageNum ? tab.pageNum : 0
				// 初始化
				if (tab && tab.pageNum == 0) {
					tab.pageNum = 1
					tab.listItmes = []
					this.loadMore(index)
				}
			},
			swiperChange(e) {
				var index = e.detail.current
				this.activeTab = index;
				var tab = this.tabItems[index]
				tab.pageNum = tab.pageNum ? tab.pageNum : 0
				// 初始化
				if (tab && tab.pageNum == 0) {
					tab.pageNum = 1
					tab.listItmes = []
					this.loadMore(index)
				}
			},
			// 加载分类
			loadCategories() {
				apiSys.categories({
					mode: "sutra"
				}).then(res => {
					this.tabItems = [...this.tabItems, ...res.sutra];
				}).catch(err => {
					console.error(err)
				})
			},
			// 加载文章
			loadMore(index) {
				var tab = this.tabItems[index]
				this.isLoading = true
				this.loadingText = "...加载中..."
				apiSutra.list({
					page: tab.pageNum,
					category: tab.id,
					order: index == 0 ? "hot" : "new"
				}).then(res => {
					this.isLoading = false
					if (res.size > 0) {
						this.loadingText = "加载更多"
						tab.pageNum++
						tab.listItmes = [...tab.listItmes, ...res.list];
					} else {
						this.loadingText = "没有更多数据"
					}
				}).catch(err => {
					this.isLoading = false
					this.loadingText = "网络异常"
					console.error(err)
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		// 导航栏分类
		.tabs {
			width: 100%;
			height: 88rpx;
		}

		// 可滑动页面
		.swipers {
			width: 100%;
			flex: 1;

			.scroll {
				height: 100%;
				width: 100%;

				// 列表
				.list {
					margin: 0rpx 25rpx;

					&-item {
						position: relative;
						padding: 36rpx 0;
						border-bottom: 2rpx solid rgba(213, 150, 77, 0.2);

						.tag {
							position: absolute;
							top: 0;
							right: 0;

							.icon-album {
								font-size: 68rpx;
								color: #ffa74b;
							}
						}

						.title {
							font-weight: bold;
							color: #493129;
							font-size: 38rpx;
						}

						.append {
							display: flex;
							justify-content: space-between;
							margin-top: 18rpx;

							.category {
								font-size: 25rpx;
								color: #ffa74b;
								margin-right: 36rpx;
							}

							.volumn {
								font-size: 25rpx;
								color: rgba(73, 49, 41, 0.5);
							}

							.keyman {
								.icon-writer {
									font-size: 25rpx;
									margin-right: 5rpx;
								}

								font-size: 25rpx;
								color: rgba(73, 49, 41, 0.5);
							}
						}
					}
				}
			}
		}
	}
</style>
